import { useNavigate } from "react-router-dom"
import { useState,useRef } from "react"
import {Button, Form,Input} from 'antd'
import { classNames } from "../../utils"
import style from './index.module.less'

const loginClass = classNames(style,'login-page')
const formClass = classNames(style,'login-form')
const rules = {
  account:[
    { required: true, message: '不能为空', },
  ],
  password:[
    { required: true, message: '不能为空', },
  ]
}

export default function Login(){
  const [account,setAccount] = useState(null)
  const [password,setPassword] = useState(null)
  const [buttonLoading,setButtonLoading] = useState(false)
  const formRef = useRef(null)

  const navigate = useNavigate()
  async function login(){
    try{
      setButtonLoading(true)
      await formRef.current.validateFields()
      const formData = {
        account,password
      }
      setTimeout(async () => {
        localStorage.setItem('token',JSON.stringify(formData))
        await navigate('/')
      },1000)
    // eslint-disable-next-line no-unused-vars
    }catch(e){
      console.log('validate fail')
    } finally {
      setButtonLoading(false)
    }
  }
  return <div className={loginClass}>
    <Form 
      className={formClass}
      layout="vertical"
      ref={formRef}
      name="basic"
      labelCol={{ span: 8, }}
      // wrapperCol={{ span: 16, }}
      style={{ maxWidth: 600, }}
      autoComplete="off"
    >
      <Form.Item name="account" label="账号" rules={rules.account}>
        <Input style={{width:'100%'}} value={account} onInput={(e) => setAccount(e.target.value)}></Input>
      </Form.Item>
      <Form.Item name="password" label="密码" rules={rules.password}>
        <Input.Password value={password} onInput={(e) => setPassword(e.target.value)}></Input.Password>
      </Form.Item>
      <Button type="primary" block loading={buttonLoading} onClick={login}>登录</Button>
    </Form>
  </div>
}